﻿<!--@时间：2022-3-17
    @描述：控件-树表
    @使用：
        import TreeTable from "@/components/common/TreeTable.vue"
属性如下：
showOperation:是否显示操作
treeHeight:树高度
tableHeight:表高度
nodeIdKey:对应节点id的栏位名称
nodeLabelKey:对应节点label的栏位名称
treeData:树的数据集
-->

<template>
  <el-row>
    <el-col :span="6">
      <el-input
        placeholder="输入关键字进行过滤"
        v-model="filterText">
      </el-input>
      <el-tree ref="__tree" highlight-current accordion :filter-node-method="filterNode" :node-key="nodeIdKey?nodeIdKey:'id'" :data="treeData?treeData:data"  :props="defaultProps" @node-click="handleNodeClick" :style="treeStyle"></el-tree>
    </el-col>
    <el-col :span="18">
      <el-table :data="tableData" stripe border :style="tableStyle">
        <el-table-column align="center" v-for="(col, index) in tableColumn" :key="index" :label = "col.label" :width="col.width?col.width:''" :fixed="col.fixed">
          <template slot-scope = 'scope'>
            <span>{{scope.row[col.name]}}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="showOperation"
          align="center"
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <slot name="operation">
              <el-button @click="handleClick(scope.row,op.text)" type="text" size="small" v-for="(op, index) in operations" :key="index">
                <span><i class="'iconfont ' + op.icon"></i>{{op.text}}</span>
              </el-button>
            </slot>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</template>
<script>
export default {
  components: {
  },
  props: ['showOperation', 'treeStyle', 'tableStyle', 'nodeIdKey', 'nodeLabelKey', 'treeData'],
  created () {
  },
  data () {
    return {
      currentPage: 1,
      pageSize: 10,
      totalLength: 0,
      filterText: '',
      data: [{
        label: '一级 1',
        id: '1',
        children: [{
          label: '二级 1-1',
          id: '11',
          children: [{
            label: '三级 1-1-1',
            id: '111'
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: this.nodeLabelKey ? this.nodeLabelKey : 'label'
      },
      tableColumn: [{
        name: 'column',
        fixed: true,
        width: '',
        label: '表头'
      }],
      tableData: [{
        column: '表头'
      }],
      operations: [{
        icon: 'icon-bianji',
        text: '编辑'
      }]
    }
  },
  computed: {
  },
  watch: {
    filterText (val) {
      this.$refs.__tree.filter(val)
    },
    treeData (val) {
      let self = this
      let k = this.nodeIdKey ? this.nodeIdKey : 'id'
      if (val && val.length > 0) {
        this.$nextTick(() => {
          self.$refs.__tree.setCurrentKey(val[0][k])
          let n = self.$refs.__tree.getCurrentNode()
          self.handleNodeClick(n ? n.data : {}, n)
        })
      }
    }
  },
  methods: {
    filterNode (value, data) {
      if (!value) return true
      var k = this.nodeLabelKey ? this.nodeLabelKey : 'label'
      return data[k].indexOf(value) !== -1
    },
    handleNodeClick (data) {
      let self = this
      this.$emit('onNodeClick', data, (tableData, columns) => {
        self.tableData = tableData
        self.tableColumn = columns
      })
    },
    handleClick (rowIndex, actionText) {
      let d = this.tableData[rowIndex]
      this.$emit('onActionClick', d, actionText)
    }
  }
}
</script>
<style>

</style>
